<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <script src="/static/header.js"></script>
</head>

<body>

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                    aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/systemctl/product?list=1&user={{ user }}">NANCAL</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a class="btn-group-sm" href="#">{{ user }}</a></li>
                <li><a class="btn-group-sm" href="/login/?close=1">退出</a></li>
            </ul>
        </div>
    </div>
</nav>

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
            <ul class="nav nav-sidebar">
                {% for i in  menu %}

                    {% if list == i.id %}
                        <li class="active"><a href="{{ i.url }}?list={{ i.id }}&user={{ user }}">{{ i.name }}<span class="sr-only">(current)</span></a></li>
                    {% else %}
                        <li><a href="{{ i.url }}?list={{ i.id }}&user={{ user }}">{{ i.name }}<span class="sr-only">(current)</span></a></li>
                    {% endif %}
                {% endfor %}

            </ul>
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <h1 class="page-header">日志信息</h1>

            <!--面板 开始-->
            <div class="panel panel-default">
                <div class="panel-heading"></div>
                <div class="panel-body">
                    <div class="page-header">

                        <h1>{{ job_name }}</h1>
                        <textarea style="width: 100%;height:30px" id="stage">获取日志中……</textarea>
                        <div class="progress">
                            <div class="progress-bar progress-bar-success progress-bar-striped active"
                                 id="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0"
                                 aria-valuemax="100" style="width: 45%;">
                            </div>
                        </div>
                        <input style="display: none;" type="text" class="form-control" id="job_name" name="job_name" value="{{ job_name }}" readonly>

                    </div>
                    <div>
                        <textarea style="width: 100%;height:600px" id="logs">
                        </textarea>
                    </div>
                </div>
            </div>
            <!--面板 结束-->
        </div>
    </div>
</div>


<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="/static/jquery-3.3.1.js"></script>
<script src="/static/bootstrap-3.3.7/js/bootstrap.js"></script>
<script src="/static/axios.min.js"></script>
<script>
let job_status = ''
let log = ''
let stage = ''
let stage_percent = ''
const textarea = document.getElementById("logs")

function changeProgress(value,ariaValuenow){
     $("#progress-bar").css("width",value)
     $("#progress-bar").text(value)
     $("#progress-bar").val("aria-valuenow",ariaValuenow)
}


function checkJobDone(job_name) {

    axios.get('/pod/deploy/logs?job_name='+job_name, {
  // 如果需要传数据，从这里传
    }).then(response => {
        // 将 response 中的日志显示
        const data = Object.values(response.data)
        log = data[0]['log']
        stage = data[1]['stage']
        status = data[1]['status']
        stage_percent = data[1]['stage_percent']
        document.getElementById("logs").innerHTML = log

        textarea.scrollTop = textarea.scrollHeight
        if (status == 'success') {
            job_status = 'success'
            document.getElementById("stage").innerHTML = '成功 !' + stage + '已完成 !'
            changeProgress("100%","100")
        }
        else if (status == 'failed'){
            job_status = 'success'
            document.getElementById("stage").innerHTML = stage + '失败 , 请检查日志报错'
            $("#progress-bar").removeAttr("class","progress-bar progress-bar-success progress-bar-striped active");
            $("#progress-bar").attr("class","progress-bar progress-bar-danger progress-bar-striped active");
            changeProgress("100%","100")
        }
        else if (status == 'running'){
            document.getElementById("stage").innerHTML = stage + '进行中 ...'
            changeProgress(stage_percent + "%", stage_percent)
        }
    })
}

function getLogs(){
    const job_name = document.getElementById("job_name").value

    changeProgress("0%","0")
    // 成功后 启动轮询
        const timeId = setInterval(() => {
            checkJobDone(job_name);
            if (job_status === 'success') {
                clearInterval(timeId)
            };
        },5000)
}

window.onload=function (){
    getLogs()
}
</script>
</body>
</html>
